import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 构建模型
 */
const points = [
  new THREE.Vector2(50, 60),
  new THREE.Vector2(25, 0),
  new THREE.Vector2(50, -60)
]; // 二维点数组
// const geo = new THREE.LatheGeometry(points, 30);
// 上面直接用点数组构建旋转几何体，初始二维线条的角是尖锐的
// 还可以通过样条曲线 或 Shape 对象的 .splineThru 方法进行插值运算找点，生成平滑曲线

const shape = new THREE.Shape(); // 创建一个 shape 对象
shape.splineThru(points); // 顶点带入样条插值计算函数
shape.curves[0].points.shift(); // splineThru 默认从原点开始，需要去掉原点
const splinePoints = shape.getPoints(10); // 插值静思园细分点数
console.log(shape);
const geo = new THREE.LatheGeometry(splinePoints, 30);

const mat = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  side: THREE.DoubleSide
});
mat.wireframe = true; // 启用线条渲染模式，方便查看细分数
const mesh = new THREE.Mesh(geo, mat);
scene.add(mesh);

const axesH = new THREE.AxesHelper(200);
scene.add(axesH);
const k = innerWidth / innerHeight,
      s = 45,
      camera = new THREE.PerspectiveCamera(s, k, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera)  
})();
